<template>
  <swiper @swiper="onSwiper" @slideChange="onSlideChange">
    <swiper-slide v-for="item in list" :key="item.id">
      <img :src="item.img" alt="" />
    </swiper-slide>
  </swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
export default {
  name: 'my-swiper',
  props: {
    list: {
      type: Array,
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper)
    },
    onSlideChange({ activeIndex }) {
      console.log(activeIndex, 'slide change')
      this.$emit('onActiveIndex', activeIndex)
    },
  },
}
</script>
